<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select id="theme">
        <option value="white">白</option>
        <option value="black">黑</option>
        <option value="purple">紫</option>
        <option value="yellow">黄</option>
        <option value="lime">青</option>
    </select>

    <p style="width: 400px;">
        Lorem ipsum的大部分文本源于西赛罗的《善恶之尽》（De finibus bonorum et malorum）中1.10.32-3小节。Neque porro quisquam est qui dolorem
        ipsum quia dolor sit amet, consectetur, adipisci velit （“无人爱苦，亦无人寻之欲之，乃因其苦”）是第一个众所周知的版本。这是由一名弗吉尼亚Hampden-Sydney
        大学的出版社社长，也是一名文献学者的Richard McClintock所发现；他在经典拉丁文学中查找“consectetur”一词相关引用时发现，这个词汇在文学体中使用频率相当低。
    </p>

    <script>
        const select = document.querySelector("select");
        const html = document.querySelector("html");
        document.body.style.padding = "10px";

        function update(bgColor, textColor) {
            html.style.backgroundColor = bgColor;
            html.style.color = textColor;
        }

        select.addEventListener("change", () => {
            switch (select.value) {
                case 'black':
                    update('black', 'white');
                    break;
                case 'white':
                    update('white', 'black');
                    break;
                case 'purple':
                    update('purple', 'white');
                    break;
                case 'yellow':
                    update('yellow', 'purple');
                    break;
                case 'lime':
                    update('psychedelic', 'purple');
                    break;
            }
        });
    </script>
</body>

</html>